<template>
	<view>
		<view class="header">
			<image class="bg_img" src="/static/img2/my/my_bg.png" mode=""></image>
			<view class="bell_box">
				<view class="badge"><u-badge numberType="overflow" type="warning" max="99" :value="msgNum"></u-badge></view>
				<image class="bell" src="/static/img2/my/bell.png" mode="aspectFit" @click="goPages('/subPages/my/inform/index')"></image>
			</view>
			<view class="user_box flex align-center">
				<view><u-avatar :src="user.userphoto" size="70" mode="aspectFill" @click="avatarPreview(user.userphoto)"></u-avatar></view>
				<!-- 未登录 -->
				<view class="user_cont font-lg font-weight-bold ml-3" v-if="!has_Login">
					<text class="text-white n_text">还没登录~</text>
					<view class="btn_box"><button class="bg-white" plain="true" @click="goLogin">立即登录</button></view>
				</view>
				<!-- 已登录 -->
				<view class="" v-else>
					<view class="user_cont font-lg font-weight-bold ml-3">
						<view class="flex align-center mb-1">
							<text class="text-white n_text mr-2">{{ user.nickname || '暂未设置昵称' }}</text>
							<text class="edit_info text-white font-smaller p px-2 ">{{ gradeState(user.grade) }}</text>
						</view>
						<!-- 未认证企业 -->
						<view class="to_cmpany text-center c_main font-small px-3 align-center" @click="toAuth(user.audit)" v-if="user.audit != 1">
							{{ firmState(user.audit) }}
							<image class="ml-1" src="/static/img2/my/right.png" mode="scaleToFill" style="width: 20rpx;height: 20rpx;"></image>
						</view>
						<!-- 已认证 -->
						<view class="to_cmpany text-center c_main font-small px-3  align-center" @click="goPages('/subPages/company_home/index?id=' + user.id)" v-else>
							{{ user.business_company || '' }}
							<image class="ml-1" src="/static/img2/my/auth.png" mode="scaleToFill" style="width: 25rpx;height: 25rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="my_data py-2 px-3 bg-white">
				<view class="data_head pb-2 flex justify-between align-center">
					<view class="">
						<text class="h4 lh_42 mr-3" v-if="user.audit == 1" @click="(current = 0), getInfo()" :class="{ 'font-weight-bolder': current == 0 }">企业数据</text>
						<text class="h4 lh_42" @click="(current = 1), getInfo()" :class="{ 'font-weight-bolder': current == 1 }">我的数据</text>
					</view>
					<text class="c_9 font_24" v-if="user.statistical_time">统计日期：{{ user.statistical_time || '' }}</text>
				</view>
				<view class="data_list flex justify-between align-center text-center pt-3">
					<view class="data_tit flex align-center justify-center">
						<view class="flex-column">
							<image class="m-auto " src="@/static/img2/my/data_icon.png" mode=""></image>
							<view class="mt-1 font_24">数据追踪</view>
						</view>
						<view class="one_line"></view>
					</view>
					<view>
						<text class="font_24 font-weight-bold">{{ information.business || 0 }}</text>
						<view class="mt-1 font_24">交换名片</view>
					</view>
					<view class="">
						<text class="font_24 font-weight-bold">{{ information.advisory || 0 }}</text>
						<view class="mt-1 font_24">询价总数</view>
					</view>
					<view class="">
						<text class="font_24 font-weight-bold">{{ information.enterprise || 0 }}</text>
						<view class="mt-1 font_24">收藏企业</view>
					</view>
					<view class="">
						<text class="font_24 font-weight-bold">{{ information.product || 0 }}</text>
						<view class="mt-1 font_24">收藏产品</view>
					</view>
				</view>
				<view
					class="to_company_text mt-2 pt-2 text-center font_24"
					v-if="user.audit == 1 && current == 0 && user.grade != 3"
					@click="goPages('/subPages/my/company_main/index')"
				>
					<text>编辑我的主页</text>
					<text class="c_main ml-1">立即前往></text>
				</view>
			</view>
		</view>
		<view class="gnb_warp" :class="{ gnb_warp_auto: user.audit == 1 && user.grade != 3 }">
			<!-- 光能杯评选投票  activity_status   1  活动关闭， 0  活动开启 -->
			<view class="px-2 pt-2" v-if="gnbInfo.activity_status == 0">
				<view
					class="adcont px-2 py-4 mb-05 rounded_15 position-relative text-center text-white"
					:style="'background:url(' + item.img + ')'"
					v-for="item of gnbAd"
					:key="item.id"
					@click="goPages('/subPages/my/gnb_vote/apply?grade=' + user.grade)"
				>
					<text class="font-weight-bold">{{ item.title }}</text>
					<text class="position-absolute right-0 bottom-0 font-sm p-1">查看详情</text>
				</view>
			</view>
			<view class="cont_list p-2">
				<view
					class="flex justify-between align-center bg-white p-2 mb-05 rounded_15"
					@click="mygnb"
					v-if="(user.grade == 2 || user.grade == 4) && gnbInfo.activity_status == 0"
				>
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/my_gnb.png" mode="aspectFit"></image>
						<text class="h4 ml-4">我的光能杯</text>
					</view>
					<view class="font-sm">状态：{{ gnbState(gnbInfo.status) }}</view>
				</view>
				<u-modal :show="modelShow" title="通知" @confirm="modelShow = false">
					<view class="slot-content text-center">
						<view class="font-md">
							<view v-if="gnbInfo.status == 0">
								您的报名申请正在审核中
								<br />
								请耐心等待
							</view>
							<view v-else-if="gnbInfo.status == 1">
								您的报名申请已通过审核
								<br />
								请等待{{ gnbInfo.vote_time }}投票开始
							</view>
							<view v-else>很抱歉，您的报名申请没有通过</view>
						</view>
						<view class="c_6 font_24 mt-2">
							<view v-if="gnbInfo.status == 0">审核时间为1-3个工作日</view>
							<view class="">如有问题请拨打客服电话：188232329807</view>
						</view>
					</view>
				</u-modal>
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/person_set/index')" v-if="user.grade == 2">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/person_set.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">人员设置</text>
					</view>
					<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
				</view>
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/card/business_card')">
					<view class="flex align-center">
						<image class="l_icon" src="@/static/img2/my/code.png" mode="aspectFit"></image>
						<text class="h4 ml-4">我的名片</text>
						<text class="to_cmpany text-center font_24 py px-2 ml-2" style="height: auto;color: #7c4710;">完善名片快速加入现场通讯录</text>
					</view>
					<view class="flex align-center">
						<!-- <view class="mr-2"><u-badge v-if="cardNum > 0" :isDot="true" type="error"></u-badge></view> -->
						<u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon>
					</view>
				</view>
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/download/index')">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/download.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">我的下载</text>
					</view>
					<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
				</view>
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/collect/index')">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/collect_icon.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">我的收藏</text>
					</view>
					<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
				</view>
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/footprint/index')">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/foot.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">我的足迹</text>
					</view>
					<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
				</view>
				<!-- <view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/card/cardcase')">
				<view class="flex align-center">
					<image class="l_icon" src="@/static/img2/my/cardcase.png" mode="aspectFit"></image>
					<text class="h4 ml-4">名片夹</text>
					<text v-if="chat == 1" class="bg_main font_22 p text-white py px-1 rounded_10 ml-2" style="height: 40rpx;">新消息</text>
				</view>
				<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
			</view> -->
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/enquiry/index')">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/price.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">我的询价</text>
					</view>
					<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
				</view>
				<!-- <view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/exhibition/index')">
				<view class="flex">
					<image class="l_icon" src="@/static/img2/my/exhibition.png" mode="aspectFit"></image>
					<text class="h4 ml-4 ">我的展会</text>
				</view>
				<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
			</view> -->
				<!-- <view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/safety/index')">
				<view class="flex">
					<image class="l_icon" src="@/static/img2/my/safe.png" mode="aspectFit"></image>
					<text class="h4 ml-4 ">账号安全</text>
				</view>
				<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
			</view> -->
			</view>
			<view class="px-2">
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/version_number.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">版本号</text>
					</view>
					<view class="h4">V{{ infoCode }}</view>
				</view>
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="goPages('/subPages/my/list/about_us/index')">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/about_us.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">关于我们</text>
					</view>
					<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
				</view>
				<view class="flex justify-between align-center bg-white p-2 mb-05 rounded_15" @click="toList('/subPages/my/list/problem/index')">
					<view class="flex">
						<image class="l_icon" src="@/static/img2/my/problem.png" mode="aspectFit"></image>
						<text class="h4 ml-4 ">问题反馈</text>
					</view>
					<view class=""><u-icon name="arrow-right" color="#b9b9b9" size="20"></u-icon></view>
				</view>
			</view>
		</view>
		<view class="p-2 b_btn" v-if="has_Login"><view class="bg-white p-2 mb-05 rounded_15 text-center" @click="outLoginShow = true">退出登录</view></view>
		<u-popup :show="outLoginShow" mode="bottom" closeOnClickOverlay @close="close">
			<view class="p-2 bg-white">
				<view class="font_24 c_9 my-2">退出登录后将会清除缓存</view>
				<button class="out_btn bg_main font text-white my-2" @click="exitBtn">确认退出</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/my/userinfo.js';
import { messageActivity, userContrast } from '@/api/my/inform.js';
import { mapState, mapMutations } from 'vuex';
import { outlogin } from '@/util/api.js';
import { voteParticipate } from '@/api/my/gnb_apply.js';
import { adsenseGetList } from '@/api/home/home.js';
export default {
	data() {
		return {
			has_Login: false,
			user: {},
			information: {},
			msgNum: 0, //消息数量
			outLoginShow: false,
			current: 0,
			cardNum: 0, //名片消息
			chat: 0, //是否有新消息
			infoCode: '1.2.1',
			gnbInfo: {}, //光能杯参评信息
			modelShow: false,
			gnbAd: []
		};
	},
	computed: {
		...mapState(['hasLogin']), //监听全局haslogin
		firmState(val) {
			return function(val) {
				// console.log('==', val);
				var text = '';
				switch (val) {
					case 0:
						text = '企业认证';
						break;
					case 1:
						text = '认证通过';
						break;
					case 2:
						text = '审核中';
						break;
					case 3:
						text = '认证未通过';
						break;
					default:
						text = '企业认证';
				}
				return text;
			};
		},
		gradeState(val) {
			return function(val) {
				var test = '';
				switch (val) {
					case 1:
						test = '个人';
						break;
					case 2:
						test = '主账号';
						break;
					case 3:
						test = '员工';
						break;
					case 4:
						test = '管理';
						break;
					default:
						test = '个人';
				}
				return test;
			};
		},
		// 光能杯报名状态
		gnbState(val) {
			return function(val) {
				switch (val) {
					case 0:
						return '申请中';
					case 1:
						return '已同意';
					case 2:
						return '已拒绝';
					case 3:
						return '未报名';
				}
			};
		}
	},
	watch: {
		information: {
			handler(newV, oldV) {
				// console.log(newV);
				this.information = newV;
			},
			deep: true,
			immediate: true
		}
	},
	onShow() {
		this.getInfo();
		this.messageTips();
		// this.is_authorization = uni.getStorageSync('is_authorization'); // 获取用户当前订阅消息的授权状态
		// if (!this.is_authorization) {
		// 	this.openMsg()
		// }
	},
	onLoad() {
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		uni.removeStorageSync('loginToPage');

		// if (uni.getStorageSync('userInfo').hasLogin) {
		// 	this.notification();
		// }
	},
	methods: {
		...mapMutations(['SET_TOKEN']), //监听登录方法
		// 去登录
		goLogin() {
			uni.navigateTo({
				url: '/subPages/login/wx_login'
			});
		},
		// 获取用户信息
		getInfo() {
			// 获取用户数据
			uni.getStorage({
				key: 'userInfo',
				success: e => {
					let that = this;
					// console.log('登录后', e.data);
					that.has_Login = e.data.hasLogin;
					if (that.has_Login) {
						getUserInfo({
							token: e.data.token
						}).then(res => {
							// count('用户数据', res);
							if (res.code == 0) {
								this.user = res.data.member;
								this.chat = res.data.chat_status;
								if (this.user.audit != 1) {
									this.information = res.data.statistics;
								} else {
									this.information = this.current == 0 ? res.data.enterprise : res.data.statistics;
								}
								this.msgNum = res.data.count;
								this.cardNum = res.data.message_count_num;
								uni.setStorageSync('userMsg', this.user);
								if (uni.getStorageSync('userInfo')) {
									uni.getStorageSync('userInfo').audit = this.user.audit;
								}
							} else {
								uni.$u.toast(res.msg);
							}
						});
					}
				},
				fail: err => {
					console.log('获取用户数据', err);
				}
			});
			if (uni.getStorageSync('userInfo').hasLogin) {
				// 获取推送消息
				messageActivity({
					token: uni.getStorageSync('userInfo').token || ''
				})
					.then(res => {
						// console.log(res);
					})
					.catch(err => {
						console.log('获取推送消息失败', err);
					});

				// 如果用户中控修改账号密码了，小程序这边自动重新登录
				userContrast({
					token: uni.getStorageSync('userInfo').token || ''
				})
					.then(res => {
						// console.log(res);
						if (res.status == 0) return;
						uni.$u.toast('抱歉，您的登录已过期，请重新登录');
						setTimeout(() => {
							outlogin();
						}, 1500);
					})
					.catch(err => {
						console.log('操作失败', err);
					});
			} else {
				console.log('还未登录');
			}

			// 获取光能杯参评投票信息
			voteParticipate({ uid: uni.getStorageSync('userInfo').userId }).then(res => {
				if (res.code == 0) {
					this.gnbInfo = res.data;
				} else {
					console.log('光能杯', res.msg);
					// uni.$u.toast(res.msg);
				}
			});
			// 光能杯广告位
			adsenseGetList({ type: 5 }).then(res => {
				if (res.code == 0) {
					// console.log('广告位', res);
					this.gnbAd = res.data;
				} else {
					console.log('获取光能杯广告位失败', res.msg);
				}
			});
		},
		// 头像预览
		avatarPreview(img) {
			uni.previewImage({
				urls: [img],
				success(res) {
					console.log(res);
				}
			});
		},
		// 企业认证
		toAuth(val) {
			if (val == 0 || val == 3) {
				uni.navigateTo({
					url: './auth/child_firm'
				});
			} else if (val == 2) {
				uni.$u.toast('审核中，请稍等...');
			} else {
				return;
			}
		},
		toList(route) {
			if (uni.getStorageSync('userInfo').hasLogin) {
				this.goPages(route);
			} else {
				this.toLogin();
			}
		},
		close() {
			this.outLoginShow = false;
		},
		// 退出登录
		exitBtn() {
			outlogin();
		},
		// 我的光能杯
		mygnb() {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin();
				return;
			}
			if (this.user.audit != 1) {
				// 未认证企业
				uni.showModal({
					title: '通知',
					content: '您当前未完成企业认证，请完成认证后报名参与',
					confirmColor: '#E30012',
					confirmText: '前往认证',
					success: res => {
						if (res.confirm) {
							this.toAuth(this.user.audit);
						} else {
							return;
						}
					}
				});
			} else {
				// 已认证企业
				if (this.gnbInfo.type == 1) {
					// 申请参评
					if (this.gnbInfo.status == 3) {
						uni.showModal({
							title: '通知',
							content: '请您先完成光能杯报名',
							confirmColor: '#E30012',
							confirmText: '去报名',
							success: res => {
								if (res.confirm) {
									this.goPages('/subPages/my/gnb_vote/apply?activeId=' + this.gnbInfo.activity_id);
								} else {
									return;
								}
							}
						});
					} else {
						this.modelShow = true;
					}
				} else {
					// 开始投票
					this.goPages('/subPages/my/gnb_vote/vote?activityId=' + this.gnbInfo.activity_id);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.to_cmpany {
	background: linear-gradient(to top, #ffe8ce, #fbc9a0);
	height: 30rpx;
	line-height: 30rpx;
	border-radius: 50rpx;
	display: inline-flex;
	// transform: scale(0.9);
}

.header {
	width: 100%;

	.bg_img {
		width: 100%;
		height: 300rpx;
		position: relative;
		border-radius: 0;
	}

	.user_box {
		position: absolute;
		top: 30rpx;
		left: 30rpx;

		.user_cont {
			.n_text {
				font-size: 36rpx;
			}

			.btn_box {
				margin-top: 20rpx;

				button {
					height: 52rpx;
					background: #ffffff;
					border-radius: 14rpx;
					color: $color14;
					background-color: $color2;
					border: 0;
					font-size: 28rpx;
					line-height: 52rpx;
				}
			}

			.edit_info {
				background-color: rgba(0, 0, 0, 0.5);
				// transform: scale(0.8);
				border-radius: 10rpx;

				/*  #ifdef MP-WEIXIN  */
				padding: 6rpx 15rpx;
				/*  #endif  */
			}
		}
	}

	.my_data {
		width: 95%;
		border-radius: 15rpx;
		position: absolute;
		top: 200rpx;
		left: 50%;
		margin-left: -47.5%;
		box-shadow: 0px 0px 19px 0px rgba(224, 224, 224, 0.53);

		.data_head {
			border-bottom: 1px solid #cfcfcf;
		}

		.data_list {
			image {
				width: 41rpx;
				height: 44rpx;
				border-radius: 0;
			}
		}

		.data_tit {
			.one_line {
				height: 60rpx;
				border-right: 1px solid #cfcfcf;
				padding: 0 20rpx;
			}
		}
	}

	.bell_box {
		position: absolute;
		right: 20rpx;
		top: 0rpx;

		.badge {
			margin-left: 20rpx;
			transform: scale(0.9);
		}

		.bell {
			width: 36rpx;
			height: 43rpx;
			transform: translateY(-10rpx);
		}
	}
}
.gnb_warp {
	margin-top: 140rpx;
}
.gnb_warp_auto {
	margin-top: 225rpx;
}
.adcont {
	position: relative;
	image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 130rpx;
	}
}
// .gnb_warp {
// 	margin-top: 135rpx;
// }
// .gnb_warp_auto {
// 	margin-top: 225rpx;
// }
.cont_list {
	image {
		border-radius: 0;
	}
}

.l_icon {
	width: 40rpx;
	height: 40rpx;
	margin-top: 8rpx;
	border-radius: 0;
}

.out_btn {
	width: 100%;
	height: 80rpx;
	// background: #d3d3d3;
	border-radius: 10rpx;
	line-height: 80rpx;
}

::v-deep .u-safe-bottom {
	padding: 0;
}

.to_company_text {
	border-top: 1rpx solid #cfcfcf;
}

.b_btn {
	margin-bottom: 100rpx;
}
</style>
